<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>密钥列表</span>
        <el-button
          :loading="loading"
          type="primary"
          style="float: right"
          @click="addkey"
          round
          >添加密钥</el-button
        >
      </div>
      <div class="text item">
        <el-table :Loading="listLoading" :data="list" size='small' style="width: 100%">
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column prop="key_name" label="名称"></el-table-column>
          <el-table-column prop="public_key" label="公钥">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-view"
                type="primary"
                plain
                @click="view(scope.row.public_key)"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column prop="private_md5" label="私钥MD5"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="openverifybox(scope.row.private_md5)"
                >验证私钥</el-button
              >
              <el-button @click="delkey(scope.row.id)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :page-size='size'
          layout="total,prev, pager, next"
          :total="total">
        </el-pagination>         
        </div>     
    </el-card>

    <el-dialog
      title="提示"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-alert title="请保管好密钥信息，丢失后无法查看密文" type="success">
      </el-alert>
      <pre>{{ msg }}</pre>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :data-clipboard-text="msg"
          class="tag-read"
          @click="copy"
          >复制文本</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="验证" :visible.sync="verifydialog" :before-close="handleClose">
      <el-form  ref="form" :model="form">
        <el-form-item label="私钥MD5" label-width="80px" prop="keymd5">
          <el-input :disabled="true" v-model="form.keymd5"></el-input>
        </el-form-item>
        <el-form-item label="私钥" label-width="80px" prop="key">
          <el-input type="textarea" :rows="4" v-model="form.key"></el-input>
        </el-form-item>
        <el-alert show-icon  v-if="showAlert" :title="title" :type="altertype" :description="description" :closable="false">
        </el-alert>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="verify">验证</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, getList, del } from "@/api/key";
import Clipboard from "clipboard";
import md5 from "js-md5";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      loading: false,
      dialogVisible: false,
      verifydialog: false,
      showAlert:false,
      total:null,
      altertype: 'success',
      title:'',
      page:1,
      size:10,
      description:'',
      msg: "",
      form: {
        keymd5: "",
        key: "",
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList({'page':this.page,'size':this.size}).then((response) => {
        
        this.list = response.data;
        this.total=response.total;
        this.listLoading = false;
      });
    },
    addkey() {
      this.loading = true;
      add().then((res) => {
        this.loading = false;
        this.msg = res.private_key;
        this.dialogVisible = true;
        this.fetchData();
      });
      
    },
    copy() {
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", (e) => {
        this.$message.success("复制成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$message.error("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },
    view(data) {
      this.msg = data;
      this.dialogVisible = true;
    },
    openverifybox(data) {
      this.form.keymd5 = data;
      this.verifydialog = true;
    },
    verify() {
      const verifymd5 = md5(this.form.key);
      if (verifymd5 === this.form.keymd5) {
          this.showAlert=true
          this.altertype='success'
          this.title='私钥验证成功'
          this.description='私钥验证后的MD5值是'+verifymd5+',与之前的保持一致。'
      }else {
        this.showAlert=true
        this.altertype='error'
        this.title='私钥验证失败'
        this.description='私钥验证后的MD5值是'+verifymd5+',与之前的不一致一致。'
      }
    },
    handleClose() {
      this.$refs['form'].resetFields()
      this.verifydialog=false
      this.showAlert=false
    },
    delkey(data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        del(data).then(res=>{
          if(res.code===200){
            this.$message({
              type:'success',
              message:res.message
            })
            this.fetchData();
          }

        })
      })

    },
    handleCurrentChange(val){
      this.page=val
      this.fetchData()

    }
  },
};
</script>

<style scoped>
.clearfix span {
  font-size: 18px;
  font-weight: bold;
  line-height: 32px;
  letter-spacing: 4px;
}
pre {
  display: block;
  white-space: pre-line;
  font-size: 14px;
  background-color: black;
  color: #fff;
  padding: 27px;
}
.pagination{
  float: right;
margin: 20px 0px;
}
</style>